<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
    <a-drawer
            :title="!dataForm.cid ? '添加' : '修改'"
            :visible="visible"
            @close="cancel"
            :body-style="{ paddingBottom: '80px' }"
            :width="750"
    >
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule"  v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px" style="padding: 0px 10px;margin: 0px 10px">
    <el-form-item label="瞬间内容" prop="content">

      <a-textarea :rows="4" v-model="dataForm.content" placeholder="内容"/>

    </el-form-item>
      <el-form-item label="动态类型" >
        <el-radio-group  v-model="dataForm.type" size="small">
          <el-radio-button  label="0" >图文</el-radio-button>
          <el-radio-button  label="1" >视频</el-radio-button>
        </el-radio-group>
      </el-form-item>
    <el-form-item label="瞬间图片" v-if="dataForm.type == 0">

      <upload-img text="上传" :fileListValue="dataForm.pictureaddr" v-model="dataForm.pictureaddr" :content="{'compress':true}" :max-length="3" :isMultiple="true" style="margin-top: 15px;margin-bottom: -30px"></upload-img>
    </el-form-item>

      <el-form-item label="视频" v-if="dataForm.type == 1">
        <upload-movies text="上传" v-model="dataForm.pictureaddr" style="margin-top: -20px; "/>
      </el-form-item>
      <el-form-item label="视频地址" style="margin-top: -20px; " v-if="dataForm.type == 1">
        <el-input v-model="dataForm.pictureaddr" placeholder="地址" size="small"></el-input>
      </el-form-item>

    <el-form-item label="发布时间" >
      <el-date-picker
        v-model="dataForm.creationtime"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期" style="width: 320px;margin-left: 10px">
        >
      </el-date-picker>

    </el-form-item>

      <el-form-item label="发布人" prop="userid">
        <el-select v-model="dataForm.userid" placeholder="请选择" style="width: 320px" filterable clearable @change="changeCity">
          <el-option
            v-for="item in userDataList"
            :label="item.userniname+'-'+(item.gender==1?'男':'女')"
            :key="item.userid"
            :value="item.userid">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="标签" >
        <el-select v-model="dataForm.sid" placeholder="请选择" style="width: 320px" filterable clearable @change="changeCity">
          <el-option
            v-for="item in topicDataList"
            :label="item.topic"
            :key="item.sid"
            :value="item.sid+'___'+item.topic">
          </el-option>
        </el-select>
      </el-form-item>


    <el-form-item label="位置" >
      <el-input v-model="dataForm.creationaddr" placeholder="位置" size="small"></el-input>
    </el-form-item>
    </el-form>
        <div :style="{position: 'absolute',right: 0,bottom: 0,width: '100%', borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',zIndex: 1,}">
            <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </div>
  </a-drawer>
</template>

<script>
    import api from '@/api/api'
    import uploadImg from '@/components/Upload/uploadImg.vue'
    import uploadMovies from '@/components/Upload/uploadMovies.vue'
    export default {
    components: {
      uploadImg,uploadMovies
    },
    data () {
      return {
        visible: false,
        loading:false,
        userDataList:[],
        topicDataList:[],
        adminid:'',
        dataForm: {
          cid: 0,
          type:0,
          cuuid: '' ,
          content: '' ,
          pictureaddr: '' ,
          creationtime: '',
          creationaddr: '' ,
          longitude: '' ,
          latitude: '' ,
          cphone: '' ,
          userimg: '' ,
          userniname: '' ,
          gender: '' ,
          age: '' ,
          audit: '' ,
          uid: '' ,
          userid: '' ,
          reportdynamicdetails: '' ,
          topsort: '' ,
          viewstatus: '' ,
          replystatus: '',
          sid: '',
          tag:''
        },
        dataRule: {
          cuuid: [
            { required: true, message: '生成的随机id  为必填项', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '内容  为必填项', trigger: 'blur' }
          ],
          pictureaddr: [
            { required: true, message: '图片路径  为必填项', trigger: 'blur' }
          ],
          creationtime: [
            { required: true, message: '发布时间  为必填项', trigger: 'blur' }
          ],
          creationaddr: [
            { required: true, message: '动态发布位置  为必填项', trigger: 'blur' }
          ],
          longitude: [
            { required: true, message: '发布经度  为必填项', trigger: 'blur' }
          ],
          latitude: [
            { required: true, message: '发布纬度  为必填项', trigger: 'blur' }
          ],
          cphone: [
            { required: true, message: '号码绑定是谁发的动态  为必填项', trigger: 'blur' }
          ],
          userimg: [
            { required: true, message: '用户头像  为必填项', trigger: 'blur' }
          ],
          userniname: [
            { required: true, message: '用户名  为必填项', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '1男、2女  为必填项', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '年龄  为必填项', trigger: 'blur' }
          ],
          audit: [
            { required: true, message: '审核-- 0:通过  1:不通过 3:被举报  为必填项', trigger: 'blur' }
          ],
          uid: [
            { required: true, message: '打招呼使用  为必填项', trigger: 'blur' }
          ],
          userid: [
            { required: true, message: '用户ID  为必填项', trigger: 'blur' }
          ],
          reportdynamicdetails: [
            { required: true, message: '举报动态理由  为必填项', trigger: 'blur' }
          ],
          topsort: [
            { required: true, message: '  为必填项', trigger: 'blur' }
          ],
          viewstatus: [
            { required: true, message: '  为必填项', trigger: 'blur' }
          ],
          replystatus: [
            { required: true, message: '  为必填项', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id,adminid) { // 初始化表单验证规则
        this.dataForm.cid = id || undefined
        this.adminid = adminid

        this.visible = true
        this.dataForm.creationtime= this.$moment().format('YYYY-MM-DD HH:mm:ss') ,
        this.getUserDataList()
        this.getTopicDataList()
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.cid){
              this.loading = true
                api.post('rest/vabc/friendsCircle/info',{cid:this.dataForm.cid}).then(res => {
                this.dataForm = res;
            }).finally(() => {
                this.loading = false
            });
          }
        })
      },
      // 表单数据提交
      submit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let postData=Object.assign({},this.dataForm)
            if (!this.dataForm.cid){
                postData.cid==undefined
                api.post('rest/vabc/friendsCircle/save',postData).then(res =>{
                    this.$message.success("创建成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }else{
                api.post('rest/vabc/friendsCircle/update',postData).then(res =>{
                    this.$message.success("保存成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }
          }
        })
      },
     cancel(){
        this.visible = false
        this.reset()
    },
    reset(){
        this.$refs.dataForm.resetFields()
        this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
        //图片回写
        //this.$refs["childData"].fileList=[]
    },
      getUserDataList () {
        this.dataListLoading = true
        this.dataListLoading = true
        let postData={
          'order':'desc',
          'column':'createtime',
          'userexist':1,
          'pageSize':1000,
          adminid:this.adminid
        }
        Object.assign(postData)
        api.post('rest/vabc/userEntity/list',postData).then(res => {
          this.userDataList=res.datalist
        }).finally(() => {
          this.dataListLoading = false
        });
      },
      getTopicDataList () {
        this.dataListLoading = true
        this.dataListLoading = true
        let postData={
          'order':'desc',
          'column':'createtime',
          'userexist':1,
          'pageSize':1000,
          adminid:this.adminid
        }
        Object.assign(postData)
        api.post('rest/vabc/topic/list',postData).then(res => {
          this.topicDataList=res.datalist
        }).finally(() => {
          this.dataListLoading = false
        });
      },
      changeCity(){

        for (let index in this.userDataList){
          if (this.userDataList[index].userid==this.dataForm.userid){
            this.dataForm.creationaddr=this.userDataList[index].city
          }
        }
      }
    }
  }
</script>
